<template>
  <view class="custom-page" scr>
    <PageStatusBar
      v-if="isShowStatusBar"
      :title="title"
      :left-show="routeLevel > 1"
    >
      <slot name="status-bar"></slot>
      <template #left>
        <slot name="left"></slot>
      </template>
    </PageStatusBar>
    <slot></slot>

    <!-- <view class="footer">
      <slot name="footer"> </slot>
    </view> -->
  </view>
</template>
<script setup lang="ts">
import { useSystemStore } from "@/src/store/use-system.store";
import Taro from "@tarojs/taro";
import { computed } from "vue";

const pages = Taro.getCurrentPages();
const routeLevel = pages.length;

const props = defineProps<{ title?: string }>();

const { safeAreaInsetBottom } = useSystemStore();
const safeAreaInsetBottomString = computed(() => safeAreaInsetBottom + "px");

const isShowStatusBar = computed(() => props.title !== void 0);
</script>

<style lang="scss">
.custom-page {
  position: relative;
  height: 100vh;
  background-color: var(--sub-theme-background);
  overflow: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  &.nut-theme-dark {
    background-color: $dark-background4;
  }
  box-sizing: border-box;
  &::-webkit-scrollbar {
    display: none;
  }
  .footer {
    margin-top: auto;
    padding-bottom: v-bind(safeAreaInsetBottomString);
  }
}
</style>
